<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: 
 * @Date: 2023-11-21 16:54:39
 * @LastEditors: 
 * @LastEditTime: 2023-11-22 15:20:34
-->
<template>
    <div class="container">
        <a-space direction="vertical" style="width: 100%" :size="16">
            <a-card style="width: 100%" title="会员基础配置">
                <div>请配置会员基础信息，会员信息一但配置成功请不要轻易修改。</div>
                <div v-if="configInfo" class="card-bg">
                    <div class="flex">
                        <div>
                            <div>客户会员配置信息</div>
                            <div class="marr">会员名称：尊享会员</div>
                            <div class="marr">会员价格：199.00元</div>
                            <div class="marr">有效天数：365天</div>
                            <div class="marr">会员状态：启用</div>
                        </div>
                        <div>
                            <a-button type="primary" @click="handelAdd('编辑会员基础配置')">编辑</a-button>
                        </div>
                    </div>

                </div>

                <div v-else class="card-bg">
                    <div>
                        <div>客户会员配置信息</div>
                    </div>
                    <a-empty image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" :image-style="{
      height: '60px',
    }">
                        <template #description>
                            <span>
                                暂未会员配置信息
                            </span>
                        </template>
                        <a-button type="primary" @click="handelAdd('会员基础配置')">添加配置信息</a-button>
                    </a-empty>
                </div>
            </a-card>
        </a-space>
        <memberDeploy ref="addMemberRef" />
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {queryVipConfig} from '@/api/member'
import memberDeploy from './addModule/memberDeploy.vue'
const addMemberRef = ref(null)

const handelAdd = (titles)=>{
    addMemberRef.value.open(titles)
}
const configInfo = ref(null)
const queryVipConfigInfo = async () => {
    const data = await queryVipConfig({})
    configInfo.value = data.data? data.data.list: ''
}
onMounted(() => {
    queryVipConfigInfo()
})
</script>
<style lang="less" scoped>
.card-bg {
    background: #ececec;
    padding: 15px;
    margin-top: 20px;

    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .marr {
        margin-top: 15px;
        font-size: 13px;
    }
}
</style>